import { useDispatch, useSelector, knowledgeModelState, NavLink } from "umi";
import { useEffect } from "react";
import style from "./style.less";
import BadgeReader from "@/components/BadgeReader/BadgeReader";
import ArticleStructure from "@/components/ArticleStructure/ArticleStructure";

export default function knowledge() {
    const Dispatch = useDispatch();
    useEffect(() => {
        Dispatch({
            type: "knowledge/knowledge",
        })
        Dispatch({
            type: "knowledge/articlelist",
        })
        Dispatch({
            type: "knowledge/categorylist",
        })
    }, [])
    const { knowledgegorylist } = useSelector((state: { knowledge: knowledgeModelState }) => {
        return state.knowledge
    });

    return (
        <div className={style.knowledge} >
            <div className="left">
                {
                    knowledgegorylist.map(item => {
                        return <div className={style.left}>
                            <NavLink to={`/knowledge/${item.id}`} key={item.id}>
                                <h3>{item.title} <span>6个月前</span> </h3>
                                <dl>
                                    <dt> <img src={item.cover} alt="" /></dt>
                                    <dd>
                                        <p>{item.summary} <br /><span>{item.views}</span><span></span></p>
                                    </dd>
                                </dl>
                            </NavLink>
                        </div>
                    })
                }
            </div>
            <div className="right">
                <BadgeReader />
                <ArticleStructure />
            </div>

        </div>
    );
}
